'use client';

import React from 'react';
import { Platform } from '@/types';
import { PLATFORMS } from '@/constants/platforms';

interface PlatformSelectorProps {
  selectedPlatforms: string[];
  onPlatformToggle: (platformId: string) => void;
  onSelectAll: () => void;
  onClearAll: () => void;
}

export function PlatformSelector({
  selectedPlatforms,
  onPlatformToggle,
  onSelectAll,
  onClearAll
}: PlatformSelectorProps) {
  const isAllSelected = selectedPlatforms.length === PLATFORMS.length;
  const isNoneSelected = selectedPlatforms.length === 0;

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold">选择发布平台</h3>
        <div className="space-x-2">
          <button
            onClick={onSelectAll}
            disabled={isAllSelected}
            className="px-3 py-1 text-sm border border-border rounded hover:bg-secondary disabled:opacity-50 transition-colors"
          >
            全选
          </button>
          <button
            onClick={onClearAll}
            disabled={isNoneSelected}
            className="px-3 py-1 text-sm border border-border rounded hover:bg-secondary disabled:opacity-50 transition-colors"
          >
            清空
          </button>
        </div>
      </div>
      
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
        {PLATFORMS.map((platform) => (
          <PlatformCard
            key={platform.id}
            platform={platform}
            isSelected={selectedPlatforms.includes(platform.id)}
            onToggle={() => onPlatformToggle(platform.id)}
          />
        ))}
      </div>
      
      {selectedPlatforms.length > 0 && (
        <div className="text-sm text-muted-foreground">
          已选择 {selectedPlatforms.length} 个平台
        </div>
      )}
    </div>
  );
}

interface PlatformCardProps {
  platform: Platform;
  isSelected: boolean;
  onToggle: () => void;
}

function PlatformCard({ platform, isSelected, onToggle }: PlatformCardProps) {
  return (
    <div
      className={`p-4 border rounded-lg cursor-pointer transition-all hover:border-blue-500 hover:shadow-md ${
        isSelected ? 'border-blue-500 bg-blue-50' : 'border-gray-200'
      }`}
      onClick={onToggle}
    >
      <div className="flex items-center space-x-2">
        <span className="text-xl">{platform.icon}</span>
        <div className="flex-1 min-w-0">
          <div className="font-medium text-sm">{platform.name}</div>
          <div className="text-xs text-muted-foreground truncate">
            {platform.description}
          </div>
        </div>
      </div>
      
      <div className="mt-2 flex flex-wrap gap-1">
        {platform.features.slice(0, 2).map((feature) => (
          <span
            key={feature}
            className="text-xs px-1.5 py-0.5 bg-secondary rounded text-secondary-foreground"
          >
            {feature}
          </span>
        ))}
        {platform.features.length > 2 && (
          <span className="text-xs text-muted-foreground">
            +{platform.features.length - 2}
          </span>
        )}
      </div>
    </div>
  );
}